<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg width="100%" height="100%" id="svg" viewBox="0 0 1440 690" xmlns="http://www.w3.org/2000/svg"
        class="transition duration-300 ease-in-out delay-150">
        <style>
            .path-0 {
                animation: pathAnim-0 4s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
            }

            @keyframes pathAnim-0 {
                0% {
                    d: path("M 0,700 L 0,262 C 68.12298179319822,245.31501202335966 136.24596358639644,228.63002404671934 203,222 C 269.75403641360356,215.36997595328066 335.13912744761245,218.79491583648232 404,228 C 472.86087255238755,237.20508416351768 545.1975266231536,252.19031260735142 618,235 C 690.8024733768464,217.80968739264858 764.0707660597732,168.443833734112 837,164 C 909.9292339402268,159.556166265888 982.5194091377534,200.03435245620062 1055,203 C 1127.4805908622466,205.96564754379938 1199.851597389213,171.41875644108552 1264,175 C 1328.148402610787,178.58124355891448 1384.0742013053934,220.29062177945724 1440,262 L 1440,700 L 0,700 Z");
                }

                25% {
                    d: path("M 0,700 L 0,262 C 62.47131569907248,241.2614221916867 124.94263139814495,220.5228443833734 194,236 C 263.05736860185505,251.4771556166266 338.7007901064926,303.17004465819304 402,298 C 465.2992098935074,292.82995534180696 516.2542081758846,230.79697698385434 594,206 C 671.7457918241154,181.20302301614566 776.2823771899691,193.64204740638957 858,185 C 939.7176228100309,176.35795259361043 998.6162830642393,146.63483339058746 1049,132 C 1099.3837169357607,117.36516660941255 1141.2524905530747,117.81861903126074 1205,142 C 1268.7475094469253,166.18138096873926 1354.3737547234628,214.09069048436965 1440,262 L 1440,700 L 0,700 Z");
                }

                50% {
                    d: path("M 0,700 L 0,262 C 58.27069735486086,252.25214702851255 116.54139470972171,242.5042940570251 195,251 C 273.4586052902783,259.4957059429749 372.1051185159739,286.2349708004122 448,314 C 523.8948814840261,341.7650291995878 577.0381312263826,370.55582274132604 636,329 C 694.9618687736174,287.44417725867396 759.7423565784954,175.54173823428377 821,181 C 882.2576434215046,186.45826176571623 939.9924424596359,309.27722432153894 1008,349 C 1076.0075575403641,388.72277567846106 1154.2878735829613,345.3493644795603 1228,317 C 1301.7121264170387,288.6506355204397 1370.8560632085193,275.32531776021983 1440,262 L 1440,700 L 0,700 Z");
                }

                75% {
                    d: path("M 0,700 L 0,262 C 59.26966678117486,208.77636551013399 118.53933356234973,155.55273102026794 194,175 C 269.4606664376503,194.44726897973206 361.1123325317761,286.56544142906216 433,345 C 504.8876674682239,403.43455857093784 557.0113363105461,428.1855032634834 628,381 C 698.9886636894539,333.8144967365166 788.8423222260393,214.69254551700442 859,209 C 929.1576777739607,203.30745448299558 979.6193747852972,311.0443146684988 1041,333 C 1102.3806252147028,354.9556853315012 1174.6801786327724,291.1301958090003 1243,265 C 1311.3198213672276,238.86980419099967 1375.6599106836138,250.43490209549984 1440,262 L 1440,700 L 0,700 Z");
                }

                100% {
                    d: path("M 0,700 L 0,262 C 68.12298179319822,245.31501202335966 136.24596358639644,228.63002404671934 203,222 C 269.75403641360356,215.36997595328066 335.13912744761245,218.79491583648232 404,228 C 472.86087255238755,237.20508416351768 545.1975266231536,252.19031260735142 618,235 C 690.8024733768464,217.80968739264858 764.0707660597732,168.443833734112 837,164 C 909.9292339402268,159.556166265888 982.5194091377534,200.03435245620062 1055,203 C 1127.4805908622466,205.96564754379938 1199.851597389213,171.41875644108552 1264,175 C 1328.148402610787,178.58124355891448 1384.0742013053934,220.29062177945724 1440,262 L 1440,700 L 0,700 Z");
                }
            }
        </style>
        <defs>
            <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
                <stop offset="5%" stop-color="#F78DA7"></stop>
                <stop offset="95%" stop-color="#8ED1FC"></stop>
            </linearGradient>
        </defs>
        <path
            d="M 0,700 L 0,262 C 68.12298179319822,245.31501202335966 136.24596358639644,228.63002404671934 203,222 C 269.75403641360356,215.36997595328066 335.13912744761245,218.79491583648232 404,228 C 472.86087255238755,237.20508416351768 545.1975266231536,252.19031260735142 618,235 C 690.8024733768464,217.80968739264858 764.0707660597732,168.443833734112 837,164 C 909.9292339402268,159.556166265888 982.5194091377534,200.03435245620062 1055,203 C 1127.4805908622466,205.96564754379938 1199.851597389213,171.41875644108552 1264,175 C 1328.148402610787,178.58124355891448 1384.0742013053934,220.29062177945724 1440,262 L 1440,700 L 0,700 Z"
            stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1"
            class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
    </svg>
</body>

</html>